<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="${host_url}/css/app/common_1.css">
<link rel="stylesheet"  href="/css/app/course-details-imgText.css">
<link rel="stylesheet"  href="/css/app/window-pop.css">
<link href="/css/app/video-js.css" rel="stylesheet">
<script src="${host_url}/js/app/jquery-1.10.2.js"></script><!-- 音频 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
<script type="text/javascript">
/* var vConsole = new VConsole(); */
$(function() {
	/* var $items = $('.contentInner ul.flex-layout li p');
	$items.click(function() {
		$items.removeClass('active');
		$(this).addClass('active');

		var index = $items.index($(this));
		$('.content').hide().eq(index).show();
	}).eq(0).click(); */
	$('.title-list li').click(function(){
	    var liindex = $('.title-list li').index(this);
	    $(this).addClass('on').siblings().removeClass('on');
	    $('.content').eq(liindex).fadeIn(150).siblings('.content').hide();
	    var liWidth = $('.title-list li').width();
	    $('.title-list > p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
    });
});	

$(function(){
    <c:if test="${'ios'==os}">
	    window.webkit.messageHandlers.ios_net_type.postMessage('');
    </c:if> 
});
function networkIOS(t){
	//1 是WIFI   2是 手机自带网络
	$("#networkIOS").val(t);
}
</script>
<style>
.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: rgba(255,255,255,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

/* 视频  声音 */
.vjs-remaining-time{
  display: none;
   }
   
   .vjs-custom-skin > .video-js {
  width: 100%;
  font-family: 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', 'Segoe UI',
    'Microsoft YaHei', '微软雅黑', sans-serif;
}

.vjs-custom-skin > .video-js .vjs-menu-button-inline.vjs-slider-active,
.vjs-custom-skin > .video-js .vjs-menu-button-inline:focus,
.vjs-custom-skin > .video-js .vjs-menu-button-inline:hover,
.video-js.vjs-no-flex .vjs-menu-button-inline {
  width: 10em;
}

.vjs-custom-skin > .video-js .vjs-controls-disabled .vjs-big-play-button {
  display: none !important;
}

.vjs-custom-skin > .video-js .vjs-control {
  width: 3em;
}

.vjs-custom-skin > .video-js .vjs-control.vjs-live-control {
  width: auto;
  padding-left: 0.5em;
  letter-spacing: 0.1em;
}

.vjs-custom-skin > .video-js .vjs-menu-button-inline:before {
  width: 1.5em;
}

.vjs-menu-button-inline .vjs-menu {
  left: 3em;
}

.vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button,
.video-js.vjs-ended .vjs-big-play-button,
.video-js.vjs-paused .vjs-big-play-button {
  display: block;
}

.vjs-custom-skin > .video-js .vjs-load-progress div,
.vjs-seeking .vjs-big-play-button,
.vjs-waiting .vjs-big-play-button {
  display: none !important;
}
.video-js .vjs-big-play-button {
}
.vjs-custom-skin > .video-js .vjs-mouse-display:after,
.vjs-custom-skin > .video-js .vjs-play-progress:after {
  padding: 0 0.4em 0.3em;
}

.video-js.vjs-ended .vjs-loading-spinner {
  display: none;
}

.video-js.vjs-ended .vjs-big-play-button {
  display: block !important;
}

.video-js.vjs-ended .vjs-big-play-button,
.video-js.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button {
  display: block;
}

.vjs-custom-skin > .video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  width:2em;
  height:2em;
  margin-left: -1em;
  margin-top: -1em;
  border-radius: 50%;
}

.vjs-custom-skin > .video-js .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.45);
  font-size: 3.5em;
  /*border-radius: 50%;*/
  height: 2em !important;
  width: 2em !important;
  line-height: 2em !important;
  margin-top: -1.3em !important;
  border: 5px solid #fff;
}
.vjs-custom-skin > .video-js .vjs-big-play-button > span.vjs-icon-placeholder {
  line-height: 1.7em;
}

/* 音量 */
.video-js .vjs-volume-panel {
  display: none !important;
}
.video-js:hover .vjs-big-play-button,
.vjs-custom-skin > .video-js .vjs-big-play-button:focus,
.vjs-custom-skin > .video-js .vjs-big-play-button:active {
  background-color: rgba(255, 255, 255, 0.5); 
}

.vjs-custom-skin > .video-js .vjs-loading-spinner {
  border-color: rgba(36, 131, 213, 0.8);
}

.vjs-custom-skin > .video-js .vjs-control-bar2 {
  background-color: #000;
}

.vjs-custom-skin > .video-js .vjs-control-bar {
  /*background-color: rgba(0,0,0,0.3) !important;*/
  color: #ffffff;
  font-size: 14px;
  display: flex;
}

.vjs-custom-skin > .video-js .vjs-play-progress,
.vjs-custom-skin > .video-js .vjs-volume-level {
  background-color: #f34545;
}

.vjs-custom-skin > .video-js .vjs-play-progress:before {
  top: -0.3em;
}

.vjs-custom-skin > .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.3em;
}

.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
  left: 0em;
}

.vjs-custom-skin > .video-js .vjs-menu li {
  padding: 0;
  line-height: 2em;
  font-size: 1.1em;
  font-family: 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', 'Segoe UI',
    'Microsoft YaHei', '微软雅黑', sans-serif;
}

.vjs-custom-skin > .video-js .vjs-time-tooltip,
.vjs-custom-skin > .video-js .vjs-mouse-display:after,
.vjs-custom-skin > .video-js .vjs-play-progress:after {
  border-radius: 0;
  font-size: 1em;
  padding: 0;
  width: 3em;
  height: 1.5em;
  line-height: 1.5em;
  top: -3em;
}

.vjs-custom-skin > .video-js .vjs-menu-button-popup .vjs-menu {
  width: 5em;
  left: -1em;
}

.vjs-custom-skin
  > .video-js
  .vjs-menu-button-popup.vjs-volume-menu-button-vertical
  .vjs-menu {
  left: 0;
}

/*排序顺序*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control {
  order: 0;
}

.vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-control {
  min-width: 1em;
  padding: 0;
  margin: 0 0.1em;
  text-align: center;
  display: block;
  order: 1;
}

.vjs-custom-skin
  > .video-js
  .vjs-control-bar
  .vjs-playback-rate
  .vjs-playback-rate-value {
  font-size: 1.2em;
  line-height: 2.4;
}

.vjs-custom-skin > .video-js .vjs-progress-control.vjs-control {
  order: 2;
}

.vjs-custom-skin > .video-js .vjs-control-bar .vjs-volume-menu-button {
  order: 3;
}

.vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button {
  order: 4;
}

.vjs-custom-skin
  > .video-js
  .vjs-control-bar
  .vjs-resolution-button
  .vjs-resolution-button-label {
  display: block;
  line-height: 3em;
}

.vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate {
  order: 5;
}

.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control {
  order: 6;
}

.vjs-has-started .vjs-control-bar {
  opacity: 1 !important;
}
.topInner {
	position:relative;
}
.topInner .my-video-dimensions {
	height:50vw;
	position: static;
}
.vjs-big-play-centered .vjs-big-play-button {
	z-index:99;
}
.vjs-time-divider {
	/* display:none; */
}
.video-js .vjs-tech {
	z-index:0;
}
video::-webkit-media-controls {
    display:none !important;
}

.pop-window {
	border-radius:15px;
	z-index:9999;
	color:#333;
	overflow:hidden;
}
.pop-window h1{
	font-size:18px;
	text-align:center;
	padding:20px 0 0;
}
.pop-window h2{
	color:#333;
	font-size:14px;
	padding:5px 18px 20px !important;
}
.pop-window button {
	width:50%;
	margin:0;
	border:0;
	outline:0;
	height:auto;
	padding:10px 0;
	background:#fff;
	color:#4986F7;
	font-size:16px;
	border-top:1px solid #f2f2f2;
	border-radius:0;
	box-sizing:border-box;
}
.pop-window button:first-child{
	border-right:1px solid #f2f2f2;
}
.pop-window .pop-window-title{
	height:auto;
	padding:5px 10px;
}
.mask {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	background:rgba(0,0,0,.5);
	z-index:999;
}
.big-audio-play.audio-stop {
	    background-image: url(../../img/app/zt_3.png);
}
</style>
<title>课程详情--介绍</title>
</head>
<body>	
	<input type="hidden" name="reFlag" id="reFlag" value="0"/>
	<input type="hidden" name="networkIOS" id="networkIOS" value="0"/>
	<input type="hidden" name="os" id="os" value="${os }"/>
	<div class="main">
		<div class="topInner">
		
			<c:choose>
				<c:when test="${reLessonVO.type eq '1' }">
					<img src="${reLessonVO.img}" alt="">
				</c:when>
				<c:when test="${reLessonVO.type eq '2' }">
				
				<div id="sp" style="position:absolute;top:0;left:0;right:0;bottom:36px;z-index:1;" ></div>
				<video id="my-video" class="video-js vjs-big-play-centered" x5-playsinline="true" webkit-playsinline="webkit-playsinline" playsinline="playsinline" controls preload="auto" width="100%" poster="${reLessonVO.img}${suffix}" ended="reset()" >
				    <source src="${reLessonVO.video}" type='video/mp4'>
				</video>

				</c:when>
				<c:otherwise>
					<div class="po-r">
						<img src="${reLessonVO.img}${suffix}" alt="">
						<!-- music -->
						<div class="audio-box po-a">
							<div class="audio-play big-audio-play po-a" style="left:50%;top:50%;z-index:9999;"></div>
							<div class="audio-container po-a">
								<div class="audio-view po-r">
									<div class="audio-body">
										<div class="audio-backs">
											<div class="audio-this-time">00:00</div>
											<div class="audio-count-time">00:00</div>
											<div class="audio-setbacks">
												<i class="audio-this-setbacks">
													<span class="audio-backs-btn"></span>
												</i>
												<span class="audio-cache-setbacks">
												</span>
											</div>
										</div>
									</div>
									<div class="audio-btn po-a">
										<div class="audio-select clearfix">
											<div class="audio-prev"></div>
											<div class="audio-play">
												<img src="/img/app/bf.png" class="bf">
												<img src="/img/app/zt_2.png" class="zt"> 
											</div>
											<div class="audio-next"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</c:otherwise>
			</c:choose>
		</div>
		<div class="contentInner">
			<ul class="flex-layout title-list cf">
				<li>
					<p class="on">图文</p>
				</li>
				<li>
					<p>介绍</p>
				</li>
				<li>
					<p>目录</p>
				</li>
				<p></p>
			</ul>
			<div class="content show">
				<div class="list">
					<%-- <h6>${reLessonVO.title}</h6> --%>
					${reLessonVO.remark}
					<!-- <h6>《没有流量怎么建立团队》</h6>
					<img src="/img/app/course_details_img_1.jpg" alt="">
					<img src="/img/app/course_details_img_2.jpg" alt=""> -->
				</div>
				<!-- <div class="comment">
					<p class="title">评论</p>
					<div class="flex-layout">
						<div class="leftarea"><img src="/img/app/banner_1.jpg" alt=""></div>
						<div class="rightarea">
							<p class="topInner flex-layout"><span>名字啊名字</span><span class="time">2018-05-25</span></p>
							<p>评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊</p>
						</div>
					</div>
					<div class="flex-layout">
						<div class="leftarea"><img src="/img/app/banner_1.jpg" alt=""></div>
						<div class="rightarea">
							<p class="topInner flex-layout"><span>名字啊名字</span><span class="time">2018-05-25</span></p>
							<p>评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊</p>
						</div>
					</div>
					<div class="flex-layout">
						<div class="leftarea"><img src="/img/app/banner_1.jpg" alt=""></div>
						<div class="rightarea">
							<p class="topInner flex-layout"><span>名字啊名字</span><span class="time">2018-05-25</span></p>
							<p>评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊</p>
						</div>
					</div>
					<div class="flex-layout">
						<div class="leftarea"><img src="/img/app/banner_1.jpg" alt=""></div>
						<div class="rightarea">
							<p class="topInner flex-layout"><span>名字啊名字</span><span class="time">2018-05-25</span></p>
							<p>评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊</p>
						</div>
					</div>
				</div> -->
			</div>
			<!-- 介绍 -->
			<div class="content">
				<div class="list">
					${reLessonVO.intro }
				</div>
			</div>
			<!-- 目录 -->
			<div class="content" style="padding:0 0 15px;">
			
			<c:choose>
				<c:when test="${fn:length(clist) >0 }">
					<c:forEach items="${clist}" var="cat" varStatus="status">
						<c:if test="${fn:length(cat.lessonList) >0 }">
							<div class="catalog-list">
								<h6 style="padding:0 0 0 12px">
									<p>${cat.name}</p>
								</h6>
								<ul>
									<c:forEach items="${cat.lessonList}" var="lessonItem" varStatus="status">
										<li class="flex-layout"
											<c:if test="${lessonItem.id eq reLessonVO.id }"> style="color:#f34545"</c:if>
										 onclick="fn_courseDetail('${os}',${lessonItem.id })">
											<c:choose>
												<c:when test="${lessonItem.type eq '1' }">
													<p class="left-icon"><img src="/img/app/catalog_icon_3.png" alt=""></p>
												</c:when>
												<c:when test="${lessonItem.type eq '2' }">
													<p class="left-icon"><img src="/img/app/catalog_icon_1.png" alt=""></p>
												</c:when>
												<c:otherwise>
													<p class="left-icon"><img src="/img/app/catalog_icon_2.png" alt=""></p>
												</c:otherwise>
											</c:choose>
											<p>${lessonItem.title }</p>
										</li>
									</c:forEach>
								</ul>
							</div>
						</c:if>
					</c:forEach>
				</c:when>
				<c:otherwise>
					<div class="catalog-list">
						<h4 style="height:44px;background:#f3f3f3;"></h4>
						<ul>
							<li class="flex-layout" style="color:#f34545">
								<c:choose>
									<c:when test="${reLessonVO.type eq '1' }">
										<p class="left-icon"><img src="/img/app/catalog_icon_3.png" alt=""></p>
									</c:when>
									<c:when test="${reLessonVO.type eq '2' }">
										<p class="left-icon"><img src="/img/app/catalog_icon_1.png" alt=""></p>
									</c:when>
									<c:otherwise>
										<p class="left-icon"><img src="/img/app/catalog_icon_2.png" alt=""></p>
									</c:otherwise>
								</c:choose>
								<p>${reLessonVO.title }</p>
							</li>
						</ul>
					</div>
				</c:otherwise>
			</c:choose>
			</div>
		</div>
		<div id="pop" style="display:none;">
			<div class="mask"></div>
			<section class="pop-window" style="animation: pop-open 0.4s; top: 166.9px;">
				<h1>温馨提示</h1>
				<h2 class="pop-window-title">您当前正在使用移动网络，继续播放将消耗流量</h2>
				<div>
					<button class="pop-window-cancel" onclick="popcancel()">取消</button>
					<button class="pop-window-confirm" onclick="popconfirm()">确定</button>
				</div>
			</section>
		</div>
	</div>
	
<%-- <script src="${host_url}/js/app/zy.media.min.js"></script> --%><!-- 视频 -->
<script src="/js/app/video.js"></script>
<script type="text/javascript" src="${host_url}/js/app/audio.js"></script><!-- 音频 -->
<script>
<c:if test="${reLessonVO.type eq '2' }">
var videoPlayer = videojs('my-video',{
	'x5-playsinline':true,
	 'webkit-playsinline':true,
	 'playsinline':true},function(){
});

function pauseVideo(){
	videoPlayer.pause();
}
videoPlayer.on("ended", function(){
	videoPlayer.currentTime(0);
	videoPlayer.pause();
});
</c:if>

$("#sp").click(function(){
	if($("#my-video").hasClass("vjs-paused")){
		$(".vjs-big-play-button").click();
	}else{
		videoPlayer.pause();
	}
/* 	videoPlayer.requestFullscreen */
})

	/* 视频 */
	/* 音频 */
		var song = [
			{
				'cover' : '',
				'src' : '${reLessonVO.audio}',
				'title' : '${reLessonVO.title}'
			}
		];

		var audioFn = audioPlay({
			song : song,
			autoPlay : false  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
		});
		<c:if test="${reLessonVO.type eq '3' }">
		function pauseVideo(){
			audioFn.stopAudio2();
		}
		</c:if>
		function fn_courseDetail(os,id){
			<c:if test="${reLessonVO.type eq '3' }">
				audioFn.stopAudio2();
			</c:if>
			<c:if test="${reLessonVO.type eq '2' }">
				videoPlayer.pause();
			</c:if>
			if(os=="ios"){
				window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${courseDetail_url}?id='+id+':::isRefresh->YES');
			}
			if(os=="android"){
				android.startUrl('','${courseDetail_url}?id='+id)
			}
		}
		/* 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放 */
		/* audioFn.newSong({
			'cover' : '',
			'src' : 'http://so1.111ttt.com:8282/2016/5/06m/06/199061931237.m4a?tflag=1494769315&pin=a0b26b2dddd976d74724841f6d2641d6&ip=114.233.172.33#.mp3',
			'title' : '极乐净土 - GARNiDELiA'
		},false); */

		/* 暂停播放 */
		//audioFn.stopAudio();

		/* 开启播放 */
		//audioFn.playAudio();

		/* 选择歌单中索引为3的曲目(索引是从0开始的)，第二个参数true立即播放该曲目，false则不播放 */
		//audioFn.selectMenu(3,true);

		/* 查看歌单中的曲目 */
		//console.log(audioFn.song);

		/* 当前播放曲目的对象 */
		//console.log(audioFn.audio);
	$(function(){
	    <c:if test="${'ios'==os}">
		    window.webkit.messageHandlers.ios_show_close.postMessage('');
		    window.webkit.messageHandlers.ios_hide_share.postMessage('');
	    </c:if> 
	});
	
	function popconfirm(){
		 document.getElementById('reFlag').value=1;
		 document.getElementById('pop').style.display='none';
		 <c:if test="${'ios'==os}">
		    window.webkit.messageHandlers.ios_net_type.postMessage('');
	     </c:if> 
	     setTimeout(function() {
	    	 if('${reLessonVO.type}'== '2'){
				 $(".vjs-big-play-button").click();
			 }else {
				audioFn.playAudio();
			 }
		}, 200);
	}
	function popcancel(){
		 $("#pop").hide();
	}
</script>




</body>
</html>